<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height:100%;
        }
        .cont{
            width:7.5rem;
            height:100%;
            margin: 0 auto;
            position: relative;
        }
        #canvas{
            position: absolute;
            left:0;
            top: 0;
            display: none;
        }

        #imgShow{
            width:100%;
            height:100%;
            position: absolute;
            top: 0;
            left:0;
            z-index:12;
        }
    </style>
</head>
<body>
    <div class="cont">
        <canvas id="canvas"></canvas>
        <!--生成的组合生成-->
        <img src="" alt="" id="imgShow">
    </div>

    <script src="./jquery.js"></script>
    <script>
        $(function () {
//            创建画布
            var innerW = window.innerWidth;
            var innerH = window.innerHeight;
            var bgCanvas = document.getElementById("canvas");
            var bgContext = bgCanvas.getContext("2d");
            var bgImage = new Image();
            bgCanvas.width =innerW;
            bgCanvas.height = innerH;
            bgContext.fillStyle = "green";//画布填充颜色
            bgContext.fillRect(0,0,innerW,innerH);//画布填充色
//            背景图片
            bgImage.src = "./bg.png"
            bgImage.onload = function () {
                bgContext.drawImage(bgImage,0,0,innerW,innerH);
                bgContext.beginPath(); //新路径
                bgContext.stroke();
//                二维码
                var twoImage = new Image();
                twoImage.src = "./head.jpg";
                twoImage.onload = function () {
//                    文字添加
                    bgContext.font = "bold 28px Arial";
                    bgContext.textAlign =  "center";
                    bgContext.fillStyle = "rgba(255,255,255,0.5)";
                    bgContext.fillText("长按扫描二维码",innerW/2,innerH - 50);
                    bgContext.save(); // 保存当前_context的状态
                    bgContext.beginPath();//新路径
//                    two
                    bgContext.drawImage(twoImage, innerW/2 - 75,innerH - 250 ,150,150);
//                    生成图片
                    var imgSrc = bgCanvas.toDataURL("image/png",1);
                    var imgShow = document.getElementById('imgShow');
                    imgShow.setAttribute('src', imgSrc);
                }
            }
        })

    </script>
</body>
</html>